import React from 'react';
import styled from 'styled-components';
import { Link, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import { colors, spacing, breakpoints } from '../styles/variables';

const NavContainer = styled.nav`
  background: ${colors.background};
  padding: ${spacing.md} 0;
  border-top: 1px solid ${colors.border};
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  
  ${breakpoints.md} {
    display: none;
  }
`;

const NavList = styled.ul`
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
`;

const NavItem = styled.li``;

const NavIcon = styled.div`
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 5px;
`;

const NavText = styled.div`
  font-size: 0.75rem;
  text-align: center;
`;

const NavButton = styled(Link)`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: ${colors.textSecondary};
  padding: 5px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &.active {
    color: ${colors.primary};
    background: ${colors.backgroundSecondary};
  }
  
  &:hover {
    color: ${colors.textPrimary};
    background: ${colors.backgroundSecondary};
  }
`;

function Navigation() {
  const location = useLocation();
  
  const navItems = [
    { to: "/", icon: "🏠", text: "首页" },
    { to: "/daily-fortune", icon: "📅", text: "每日运势" },
    { to: "/fortune-tools", icon: "🔮", text: "占卜工具" },
    { to: "/mind-station", icon: "🧘", text: "心灵驿站" },
    { to: "/profile", icon: "👤", text: "我的" }
  ];

  return (
    <NavContainer>
      <NavList>
        {navItems.map((item, index) => (
          <NavItem key={index}>
            <motion.div whileTap={{ scale: 0.9 }}>
              <NavButton 
                to={item.to}
                className={location.pathname === item.to ? "active" : ""}
              >
                <NavIcon>{item.icon}</NavIcon>
                <NavText>{item.text}</NavText>
              </NavButton>
            </motion.div>
          </NavItem>
        ))}
      </NavList>
    </NavContainer>
  );
}

export default Navigation;